<template>
  <div style="width:100%;height: 100%;">
    <div class="big_div">
      <x-header header-background-color="#fff"  :left-options="{showBack: true,preventGoBack:true}"    @on-click-back="GoBack" >现场反馈详情
        <!-- <a slot="right">Feedback</a> -->
      </x-header>
      <div class="big_content">
                    <ul class="myui">
                        <li>
                                <i>反馈时间</i>
                                <span>{{itemObj.feedbacktime}}</span>
                        </li>
                        <li>
                                <i>反馈人</i>
                                <span>{{itemObj.createorgcodeStr}}{{itemObj.feedBackperson}}</span>
                        </li>
                        <li>
                                <i>所属机构</i>
                                <span>{{itemObj.createorgcodeStr}}</span>
                        </li>
                        <li>
                                <i>反馈信息</i>
                                <span>{{itemObj.feedbackcon}}</span>
                        </li>
                        <li>
                                  <div class="imgsd">
                                    <div class="image-choose clearfix">
                                        <template v-for="(item,index) in picturelist">
                                            <img :key="index" :src="item.src" style="float: left" @click="show(index)">
                                        </template>
                                        <previewer @on-close="ifClose" :list="picturelist" ref="preview"></previewer>
                                    </div>
                                    <span v-for="(item,index) in fujianlist" :key="index" @click="openFileZi(item)">
                                        <img src="../../assets/images/taskList/ppt.png" alt="">
                                        <i>
                                            {{item.name}}
                                        </i>
                                    </span>
                                </div>
                        </li>
                    </ul>
      </div>
    </div>
  </div>
</template>
  
<script>
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch,XHeader,Previewer} from 'vux'
import { taskFdAjaxData,attachbyidAjaxData } from '@/assets/js/service'
export default { 
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell, 
    XSwitch, 
    Datetime,
    XHeader,
    Previewer 
  },
  props:['itemObj'],
  created(){
      let _this = this
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
       _this.$vux.loading.show({
        text: '加载中'
    });
    console.log(_this.itemObj,"数据")
    _this.taskDetails =_this.itemObj;

    console.log(_this.taskDetails,9999)

     _this.taskDetails.filelist.forEach(function (item) {
        if (!/(gif|jpg|jpeg|png|bmp)$/.test(item.name.toLowerCase())) {
            _this.fujianlist.push(item);
        } else {
            _this.picturelistName.push(item);
        }

    })

    console.log(_this.picturelistName,9898)
    console.log(_this.fujianlist,9797)
    for (let index = 0; index < _this.picturelistName.length; index++) {
        var param={
            "fileid":_this.picturelistName[index].id
        };
        attachbyidAjaxData(param,function(res1){
            if(res1){
              console.log(res1)
                _this.picturelist.push({
                    msrc: 'data:image/png;base64,'+res1.data.base64,
                    src: 'data:image/png;base64,'+res1.data.base64
                });
            }else{
                console.log("返回数据异常",res1)
                _this.$showBottomToast("请求数据异常！")
            }
        })
    }
    _this.$vux.loading.hide();
  },
  mounted(){
    window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
  },
  methods: {
    
    ifClose(){
       window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    GoBack(){
      this.$closeStates();
      this.$emit("close")
    },
    show(index) {
        //点击图片放大
        this.$refs.preview.show(index);
        window.GoBack=this.$refs.preview.close;//安卓调用GoBack（手机back键返回问题）
    },
    openFileZi(item){
        let openFileZiol=item.name.split('.');
        console.log('.'+openFileZiol[openFileZiol.length-1])
        window.android.downloadAndOpenFileWithAttachId(item.id,'.'+openFileZiol[openFileZiol.length-1]);
    },
  },
  data () {
    return {
      queryMap:{},
      date: '',
      eventlist:[],
      refreshing: false,
      loading: false,
      text: 'List',
      obj:"",
              taskDetails:{},
        picturelist:[],
        picturelistName:[],
        fujianlist:[]
    }
  }
}
</script>
 
<style  scoped>
.myui li{border-bottom: 1px solid #e3e3e3;padding: 10px 0; display: flex;justify-content: space-between;align-items: center}
.myui li i{font-style: normal;width: 25%;text-align: center}
/* .myui li div {display: flex;justify-content: space-between;flex-wrap: wrap;padding: 5px} */
.myui li div.imdDiv img{width: 30%;margin-bottom: 3%}
.myui li span{font-style: normal;width: 70%;padding-right: 5px;text-align: justify;
word-wrap: break-word;
word-break: break-all;}
.myui li div img{margin-right: 5px}
.imgsd>span>img{
    width: 20px;
    vertical-align: middle;
}
.image-choose {
    margin: 10px 10px;
}

.image-choose > img {
    margin-top: 5px;
    margin-left: 1vw;
    width: 29vw;
    height: 29vw;
    vertical-align: top;
    border-radius: 5px;
}
.imgsd>span{
    display: block;
    padding-left: 14px;
}
</style>